<template>
  <div style="width:100%;height: 100%;">
    <button @click="drawRectangle">绘制矩形</button>
    <button @click="drawCircle">绘制圆</button>
    <button @click="disableDraw">关闭绘制</button>
    <div id="custom-map"></div>
  </div>
</template>

<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";
import "leaflet.pm/dist/leaflet.pm.css";

Vue.config.productionTip = false;
Vue.L = Vue.prototype.$L = L;

/* leaflet icon */
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});
export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    drawRectangle() {
      this.map.pm.enableDraw('Rectangle', {
        snappable: true,
        snapDistance: 20,
      });
    },
    drawCircle() {
      this.map.pm.enableDraw('Circle', {
        snappable: true,
        snapDistance: 20,
      });
    },
    disableDraw() {
      this.map.pm.disableDraw('Rectangle');
    },
  },
  mounted() {
    this.map = L.map("custom-map", {
      center: [40.02404009136253, 116.50641060224784], // 地图中心
      zoom: 14, //缩放比列
      zoomControl: false, //禁用 + - 按钮
      doubleClickZoom: false, // 禁用双击放大
      attributionControl: false, // 移除右下角leaflet标识
      preferCanvas: false,
    });
    // 引入图层,可以引入多个图层
    let gaoDeLayer = L.tileLayer(
      "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
    )
    gaoDeLayer.addTo(this.map);
    // 添加地图点击弹窗
    this.map.on('click', (e) => {
      L.popup().setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(this.map);
    });
    // 添加绘制工具
    this.map.pm.addControls({
      position: "topleft",
      drawPolygon: true, // 绘制多边形
      drawMarker: false, //绘制标记点
      drawCircleMarker: false, //绘制圆形标记
      drawPolyline: false, //绘制线条
      drawRectangle: true,	//绘制矩形
      drawCircle: false, //绘制圆圈
      editMode: true, //编辑多边形
      dragMode: true, //拖动多边形
      cutPolygon: true, // 添加一个按钮以删除多边形里面的部分内容
      removalMode: true  // 清除多边形
    });
    // 控制绘制样式  如下给Polygon多边形设置样式
    var options = {
      // 连接线  标记之间的线
      templineStyle: {
        color: 'red',
      },
      // 提示线  从最后一个标记到鼠标光标的线
      hintlineStyle: {
        color: 'red',
        dashArray: [5, 5],
      },
      // 绘制完成的样式
      pathOptions: {
        color: 'orange',
        fillColor: 'green',
      },
    };
    // 会激活绘制多边形功能
    this.map.pm.enableDraw('Polygon', options);
    this.map.pm.setPathOptions({
      color: 'orange',
      fillColor: 'green',
      fillOpacity: 0.4,
    });
    //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
    this.map.pm.setLang('zh');
    // 启用绘制多边形功能
    this.map.pm.enableDraw('Polygon', {
      snappable: true,//启用捕捉到其他绘制图形的顶点
      snapDistance: 20,//顶点捕捉距离
    });

    // 关闭绘制  注意也可以关闭其他模式的绘制功能
    this.map.pm.disableDraw('Polygon');

    this.map.on("pm:drawstart", e => {
      console.log(e, "first");
    });
    this.map.on("pm:drawend", e => {
      console.log(e, "禁止绘制");
    });
    this.map.on("pm:create", e => {
      console.log(e, "绘制完成时调用");
      if (e.shape == "Circle") {
        console.log(e.layer._latlng, e.layer._radius, "绘制坐标")
      } else {
        console.log(e.layer._latlngs[0], "绘制坐标")
      }
    });
  }
}
</script>

<style scoped lang="scss">
#custom-map {
  width: 100%;
  height: 100%;
}
</style>